class Banner {
    constructor(selector) {

        this.banner = document.querySelector(selector);
        let ol = document.querySelector(".pointBox");
        let ulis = document.querySelectorAll(".imgBox > li");

        let leftBtn = document.querySelector(".left");
        let rightBtn = document.querySelector(".right");

        renderPointBox();
        // 渲染底下圆点
        function renderPointBox() {
            for (let i = 0; i < ulis.length; i++) {
                let li = document.createElement("li");
                if (i === 0)
                    li.classList.add("active");
                ol.append(li);
            }
        }

        let count = 0;  // 轮播图索引
        
        let olis = ol.querySelectorAll("li");

        rightBtn.addEventListener("click", throttle(rightFn));  // 点击 右边按钮
        leftBtn.addEventListener("click", throttle(leftFn));    // 点击 左边按钮

        // 点击 底下圆点
        olis.forEach((oli, index) => {
            oli.addEventListener("click", () => {
                // console.log(oli, index);
                // console.log(this);
                this.banner.querySelectorAll(".active").forEach(ele => {
                    ele.classList.remove("active");
                });
                oli.classList.add("active");
                ulis[index].classList.add("active");
                count = index;
            });
        });

        // 防抖函数
        /* function debounceFn(fn) {
            let timer = null;
            return function () {

                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function () {
                    fn();
                }, 500);
            }
        } */

        // 节流函数
        function throttle(fn) {
            let flag = true;
            return function () {
                if (flag) {
                    setTimeout(function () {
                        fn();
                        flag = true;
                    }, 300);
                    flag = false;
                }

            }
        }

        // 右边按钮 事件处理函数
        function rightFn() {
            count++;
            if (count > 4) {
                count = 0;
            }
            ulis.forEach((uli, index) => {
                uli.classList.remove("active");
                olis[index].classList.remove("active");
            });
            ulis[count].classList.add("active");
            olis[count].classList.add("active");
            // console.log(count);
        }

        // 左边按钮 事件处理函数
        function leftFn() {
            count--;
            if (count < 0) {
                count = 4;
            }
            ulis.forEach((uli, index) => {
                uli.classList.remove("active");
                olis[index].classList.remove("active");
            });
            ulis[count].classList.add("active");
            olis[count].classList.add("active");

        }

        // 定时器
        let timer = setInterval(rightFn, 1300);

        // 鼠标移入
        banner.addEventListener("mouseover", overFn);
        // 鼠标移出
        banner.addEventListener("mouseleave", leaveFn);

        // 鼠标移入 --> 清除定时器
        function overFn() {
            clearInterval(timer);
        }

        // 鼠标移出 --> 开启定时器
        function leaveFn() {
            timer = setInterval(rightFn, 1300);
        }
    }
}

// class Banner {
//     constructor(selector) {
//         let that = this;
//         this.banner = document.querySelector(selector);
//         this.ol = this.banner.querySelector(".pointBox");
//         this.ul = this.banner.querySelector(".imgBox");

//         this.leftBtn = this.banner.querySelector(".left");
//         this.rightBtn = this.banner.querySelector(".right");

//         this.count = 0;
//         let ulis = this.ul.querySelectorAll("li");

//         this.leftBtn.addEventListener("click", function() {
//             let olis = this.ol.querySelectorAll("li");
//             that.count--;
//             if (that.count < 0) {
//                 that.count = 4;
//             }
//             ulis.forEach((uli, index) => {
//                 uli.classList.remove("active");
//                 olis[index].classList.remove("active");
//             });
//             ulis[that.count].classList.add("active");
//             olis[that.count].classList.add("active");

//         });

//         this.rightBtn.addEventListener("click", rightFn);
//         function rightFn() {
//             let olis = that.ol.querySelectorAll("li");
//             that.count++;
//             ulis.forEach((uli, index) => {
//                 uli.classList.remove("active");
//                 olis[index].classList.remove("active");
//             });
//             ulis[that.count].classList.add("active");
//             olis[that.count].classList.add("active");

//             if (that.count >= 4) {
//                 that.count = -1;
//             }
//             // console.log(count);
//         }

//         /* let timer = setInterval(rightFn, 1500);
//         this.banner.addEventListener("mouseover", function () {
//             clearInterval(timer);
//         });
//         this.banner.addEventListener("mouseleave", function () {
//             timer = setInterval(rightFn, 1500);
//         }); */
//     }
//     renderPointBox() {
//         let ulis = this.ul.querySelectorAll("li");
//         for (let i = 0; i < ulis.length; i++) {
//             let li = document.createElement("li");
//             if (i === 0) li.classList.add("active");
//             this.ol.append(li);
//         }
//     }

// }

// 

/* {
    let banner = document.querySelector("#banner");
    let ol = document.querySelector(".pointBox");
    let ulis = document.querySelectorAll(".imgBox > li");

    let leftBtn = document.querySelector(".left");
    let rightBtn = document.querySelector(".right");

    renderPointBox();
    function renderPointBox() {
        for (let i = 0; i < ulis.length; i++) {
            let li = document.createElement("li");
            if (i === 0) li.classList.add("active");
            ol.append(li);
        }
    }

    let count = 0;
    let olis = ol.querySelectorAll("li");

    rightBtn.addEventListener("click", rightFn);
    leftBtn.addEventListener("click", leftFn);

    function rightFn() {
        count++
        ulis.forEach((uli, index) => {
            uli.classList.remove("active");
            olis[index].classList.remove("active");
        });
        ulis[count].classList.add("active");
        olis[count].classList.add("active");

        if (count >= 4) {
            count = -1;
        }
        // console.log(count);
    }

    function leftFn() {
        count--;
        if (count < 0) {
            count = 4;
        }
        ulis.forEach((uli, index) => {
            uli.classList.remove("active");
            olis[index].classList.remove("active");
        });
        ulis[count].classList.add("active");
        olis[count].classList.add("active");

    }

    let timer = null;
    timer = setInterval(rightFn, 1500);
    banner.addEventListener("mouseover", overFn);
    banner.addEventListener("mouseleave", leaveFn);
    function overFn() {
        clearInterval(timer);
    }
    function leaveFn() {
        timer = setInterval(rightFn, 1500);
    }
} */
